npm install vue-quill-editor --save<template>
	<div class="eidpublishing">
		<div class="eidpubli">
			<div class="container">
				<div class="plugins-tips">
					<!-- <span class="plugins-text">Vue-Quill-Editor：基于Quill、适用于Vue2的富文本编辑器。</span>
					访问地址：<a href="https://github.com/surmon-china/vue-quill-editor" class="plugins-text-a" target="_blank">vue-quill-                     editor</a> -->
				</div>
				<div class="container_text">
					<div class="tcontainer_left">
						<i class="el-icon-arrow-left" @click="elleft"></i><span class="tcontainer_text">文章管理</span>
					</div>
					<div class="tocotainer_botom">
						<el-button class="editor-btn" type="primary" @click="submit">提交</el-button>
					</div>
					<div class="eidpubtitle">
						<el-input v-model="input" placeholder="请输入标题"></el-input>
					</div>
				</div>
				<quill-editor ref="myTextEditor" v-model="content" :options="editorOption"></quill-editor>
			</div>
		</div>
	</div>
</template>

<script>
	import 'quill/dist/quill.core.css';
	import 'quill/dist/quill.snow.css';
	import 'quill/dist/quill.bubble.css';
	import {
		quillEditor
	} from 'vue-quill-editor';
	export default {

		data: function() {
			return {
				input: '',
				content: '',
				editorOption: {
					placeholder: '请编辑内容...'
				}
			}
		},
		components: {
			quillEditor
		},
		methods: {
			submit() {

				if (this.input == '') {
					this.$message({
						message: '请填写标题',
						type: 'warning'
					});
					return
				}
				if (this.content == '') {
					this.$message({
						message: '请填写内容',
						type: 'warning'
					});
					return
				}

				String.prototype.TextFilter = function() {
					//[]内输入你要过滤的字符，这里是我的
					let pattern = new RegExp("[`~%!@#^=''?~《》！@#￥……&——‘”“'？*()（），,。.、<>]");
					let rs = "";
					for (let i = 0; i < this.length; i++) {
						rs += this.substr(i, 1).replace(pattern, '');
					}
					return rs;
				}

				let nameteshu = this.content.slice(0, 100);
				nameteshu = nameteshu.TextFilter()
				this.$api.post(
					'/edit', {
						title: this.input,
						content: this.content,
						description: nameteshu
					}).then(res => {
					if (!res) {
						return
					}
					if (res.data.code == '1111') {
						this.$router.push('/')
						this.$message.success('提交成功！');
					}
				})

			},
			elleft() {
				this.$router.push('/')
			}
		}
	}
</script>
<style scoped lang="less">
	.eidpublishing {
		background: #FFFFFF;
	}

	/deep/.ql-blank {
		height: calc(100vh - 100px);
	}

	/deep/.ql-editor {
		height: calc(100vh - 100px);
	}

	.eidpubli {}

	.plugins-tips {
		a {
			color: #00ffff;
		}

		.plugins-text {
			font-size: 22px;
			font-weight: bold;
		}
	}

	/deep/.el-input__inner {
		text-align: center;
	}

	.container_text {
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 56px;
		background-color: #f3f3f3;
		position: relative;

		.eidpubtitle {
			width: calc(100vw - 30vw);
			border-radius: 999px;

			/deep/.el-input__inner {
				border-radius: 999px !important;
			}
		}
	}

	.tcontainer_left {
		position: absolute;
		top: 0;
		left: 20px;
		height: 56px;
		line-height: 56px;
	}

	.tcontainer_text {
		position: absolute;
		top: 0;
		left: 40px;
		height: 56px;
		line-height: 56px;
		width: 100px;
		font-size: 20px;
		color: #909090;
	}

	.el-icon-arrow-left {
		font-size: 22px;
		position: absolute;
		height: 56px;
		top: 0;
		left: 10px;
		line-height: 57.5px;
	}

	.tocotainer_botom {
		position: absolute;
		height: 56px;
		right: 5vw;
		line-height: 56px;
		display: flex;
		justify-content: center;
		align-items: center;

		.editor-btn {
			height: 40px;
			background: linear-gradient(90deg, #ff9a01, #ff503e 34%, #ff2b36 66%, #ff1b40);
			border: none;
			border-radius: 999px;
			width: 96px;
		}
	}

	/deep/.el-input__inner {
		font-size: 22px;
		font-weight: bold;
	}
</style>
